<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<meta name="viewport" content="width=device-width, 2.initial-scale=1.0, 3.maximum-scale=1.0, 4.user-scalable=no">-->
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <script src="__JS__/jquery-3.2.1.min.js"></script>
    <script src="__JS__/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
    <link href="__CSS__/home/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="__JS__/videojs-ie8.min.js"></script>
    <link rel="stylesheet" href="__CSS__/home/muke_video.css">
</head>
<body>

<!--头部开始-->
<div class="container">
    <nav class="nav navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">
                    <span class="glyphicon glyphicon-tint"></span>在线学习
                </a>

                <button class="navbar-toggle" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy3">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse bs-js-navbar-scrollspy3">
                <ul class="navbar-nav nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">职业路径</a></li>
                    <li><a href="#">实战</a></li>
                    <li><a href="#">猿问</a></li>
                    <li><a href="#">手记</a></li>
                </ul>
                <div class="navbar-form navbar-right" style="margin-right: 30px;">
                    <input type="text" class="form-control" name="" placeholder="请输入搜索内容">
                    <button class="btn btn-success" style="margin-right: 30px;">搜索</button>
                    <a href="#" class="navbar-link">注册</a>
                    <a href="#" class="navbar-link">登录 </a>
                </div>
            </div>
        </div>
    </nav>
</div>
<!--头部结束-->

    <div class="container-fluid box1" style="margin-top: 2.5rem;border: 1px solid #eed1b3;">
        <div class="row">
        <div class="col-xs-12 body_a"  style="background-color: green">
            <div class="col-md-12 col-xs-12 text-center"><h3>高性能 高价值</h3></div>
        </div>

        <div class="col-xs-12 body_b">
            <div class="col-md-12 col-xs-12 text-center"><h4 style="color: red">￥</h4></div>
        </div>

        <div class="col-xs-12 body_c" >
            <div class="col-md-12 col-xs-12 text-center"><button class="btn btn-danger btn-lg ">立即购买</button><sapn class="btn btn-danger btn-lg  glyphicon glyphicon-briefcase"></sapn></div>
        </div>
        </div>
    </div>


<!--视频播放开始-->

        <div class="container video_f">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <video onclick="playPause()"   autoplay="autoplay" id="my-video" class="video-js col-md-12 col-xs-12"  preload="auto"
                           poster="" data-setup="{}">
                        <source src="__PUBLIC__/20170719/31f9c6852cbc63d0f4102ac26f8bae01.mp4" type="video/mp4">
                        <!--<source src="mov_bbb.mp4" type="video/webm">-->
                        <!--<source src="mov_bbb.ogv" type="video/ogg">-->
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
            </div>
        </div>
<!--视频播放开始-->
        <div class="container dis"><strong>课前必学</strong></div>
        <div class="container-fluid" style="background-color: rgba(236, 236, 236, 0.4); margin-top: 20px">
            <div class="container">
                <div class="row" id="box1">
                    {volist name="course" id="value"}
                    <a href="{Chapter/chaptershow}?id={$value.id}">
                        <div class="col-sm-3  img-rounded div1">
                            <p class="btn">{$value.id}</p>
                            <p><strong>{$value.record_name}</strong></p>
                            <p>类型 ：{$value.category}</p>
                            <p>简介 ：{$value.introduce}</p>
                            <p>难度 ：{$value.difficulty}</p>
                            <p>售价：{$value.charge}</p>
                        </div>
                    </a>
                 {/volist}


                </div>
            </div>
        </div>
</body>
</html>
<script type="text/javascript">

    var myVideo=document.getElementById("my-video");
    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
    playPause();
    $(function(){
        $('.div1').mouseover(function(){
            $(this).css("backgroundColor","white");
        })
        $('.div1').mouseout(function(){
            $(this).css("backgroundColor","rgba(183, 183, 183, 0.14)");
        })
    })
</script>